import { Card, Spin } from "antd"
import React, { FC } from "react"
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis, Tooltip, Dot } from "recharts"
// import dayjs from "dayjs"
import { useRequest } from "ahooks"
import { getLast7DayCountService } from "@/service/error"

// // 生成最近7天的日期数据
// function generateLast7DaysData() {
//     const data = []
//     for (let i = 6; i >= 0; i--) {
//         const date = dayjs().subtract(i, "day").format("YYYY-MM-DD") // 动态生成日期
//         const errorCount = Math.floor(Math.random() * 10)
//         data.push({ date, errorCount })
//     }
//     return data
// }

type dayCountType = {
    date: string
    count: number
}

const ErrorAreaChart: FC = () => {
    // const data = generateLast7DaysData() // 获取最近7天的数据

    async function getData() {
        const data = (await getLast7DayCountService()) as dayCountType[]
        return data
    }

    const { loading, data } = useRequest(getData)

    return (
        <Card title="异常走势">
            {loading && (
                <div style={{ textAlign: "center", marginTop: "20px" }}>
                    <Spin />
                </div>
            )}
            {!loading && (
                <div style={{ height: "300px" }}>
                    <ResponsiveContainer width="100%" height="100%">
                        <AreaChart
                            width={500}
                            height={400}
                            data={data}
                            margin={{
                                top: 10,
                                right: 30,
                                left: 0,
                                bottom: 0
                            }}
                        >
                            <CartesianGrid strokeDasharray="3 3" />
                            {/* 横坐标为日期 */}
                            <XAxis dataKey="date" />
                            {/* 纵坐标为错误数量 */}
                            <YAxis />
                            <Tooltip />
                            {/* 使用 errorCount 作为数据字段 */}
                            <Area type="monotone" dataKey="count" stroke="#8884d8" fill="#8884d8" dot={<Dot r={3} />} />
                        </AreaChart>
                    </ResponsiveContainer>
                </div>
            )}
        </Card>
    )
}

export default ErrorAreaChart
